<template>
  <van-popup
    class="custom-popup"
    round
    position="bottom"
    get-container="body"
    style="height: 60vh"
    :value="showPickerDlg"
    @input="(val) => onCancel()"
    @close="onCancel"
  >
    <!-- 标题栏 -->
    <div class="title">
      {{ title }}
    </div>
    <!-- 选项区域 -->
    <div class="content-box">
      <slot />
    </div>
    <!-- 底部按钮栏 -->
    <van-row class="menu" type="flex" align="center">
      <van-button class="reset" type="default" @click="onReset">重选</van-button>
      <van-button class="confirm" type="primary" @click="onConfirm">确定</van-button>
    </van-row>
  </van-popup>
</template>

<script>

export default {
  name: 'selectPopup',
  props: {
    title: {
      type: String,
      default: '标题'
    },
    showPickerDlg: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onCancel () {
      this.$emit('close');
    },
    onConfirm () {
      this.$emit('confirm');
    },
    onReset () {
      this.$emit('reset');
    }
  }
}
</script>

<style scoped>
  .custom-popup {
    display: flex;
    flex-direction: column;
    background: white;
  }
  .title {
    color: #323233;
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    width: 100%;
    height: 44px;
    line-height: 44px;
    flex-grow: 0;
    flex-shrink: 0;
    background: white;
    margin-bottom: 15px;
    border-bottom: 1px solid #F5F6F7;
  }
  .content-box {
    flex-grow: 1;
    flex-shrink: 1;
    min-height: 100px;
  }
  .menu {
    height: 64px;
    flex-grow: 0;
    flex-shrink: 0;
    border-top: 1px solid #F5F6F7;
    padding: 0px 16px;
    margin-top: 5px;
    background: white;
  }
  .reset {
    width: 104px;
    flex-grow: 0;
    flex-shrink: 0;
  }
  .confirm {
    width: 64px;
    flex-grow: 1;
    flex-shrink: 1;
    margin-left: 8px;
  }
</style>
